<template>
  <div>
    <h1>人员列表</h1>
    <h2 style="color:red">Count 组件中的当前总和为 : {{total}}</h2>
    <h2 style="color:pink">人员列表中的第一个人是: {{firstPersonName}}</h2>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="addPerson">添加</button>
    <button @click="addXie">添加一个姓谢的人</button>
    <button @click="addPersonServer">点我添加一个人，姓名随机</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li> 
    </ul>
  </div>
</template>

<script>
  import { nanoid } from 'nanoid' 
  export default {
    name:'Person',
    data(){
      return {name: ''}
    },
    computed:{
      personList(){
        return this.$store.state.personAbout.personList
      },
      total(){
        return this.$store.state.countAbout.total
      },
      firstPersonName(){
        return this.$store.getters['personAbout/firstPersonName']
      }
    },
    methods: {
      addPerson(){
        const personObj = {id:nanoid(), name:this.name}
        this.$store.commit('personAbout/ADD_PERSON', personObj)
        this.name = ''
      },
      addXie(){
        const personObj = {id:nanoid(), name:this.name}
        this.$store.dispatch('personAbout/addXie', personObj)
        this.name = ''
      },
      addPersonServer(){
        this.$store.dispatch('personAbout/addPersonServer')
      }
    },
  }
</script>

<style>

</style>